<template>
  <div style="height: 500px; position: relative">
    <fs-crud ref="crudRef" v-bind="crudBinding" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, watch } from 'vue';
  import createCrudOptions from './crud';
  import { useFs, useUi } from '@fast-crud/fast-crud';

  export default defineComponent({
    name: 'EditableFreeSub',
    props: {
      modelValue: {
        type: Array,
        default() {
          return undefined;
        },
      },
    },
    emits: ['update:modelValue'],
    setup(props, ctx) {
      const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
      const { ui } = useUi();
      let formItemContext = ui.formItem.injectFormItemContext();

      function emit(data) {
        console.log('emit:', data);
        ctx.emit('update:modelValue', data);
        formItemContext.onBlur();
        formItemContext.onChange();
      }

      // 页面打开后获取列表数据
      onMounted(() => {
        // crudExpose.doRefresh();
        watch(
          () => {
            return props.modelValue;
          },
          (value: any) => {
            if (value != null) {
              crudBinding.value.data = value;
            } else {
              crudBinding.value.data = [];
              emit(crudBinding.value.data);
            }
          },
          {
            immediate: true,
          }
        );

        crudExpose.editable.enable({ mode: 'free', activeDefault: true });
      });

      async function validate() {
        //校验，在上级表单的beforeSubmit中调用
        return await crudExpose.getTableRef().editable.validate();
      }
      return {
        crudBinding,
        crudRef,
        validate,
      };
    },
  });
</script>
